Camera এবং Image Picker এর ব্যবহার

React Native-এ মোবাইল অ্যাপ্লিকেশনগুলিতে ছবি তোলা এবং ছবি নির্বাচন করার জন্য Camera এবং Image Picker বেশ গুরুত্বপূর্ণ ফিচার। এই ফিচারগুলি আপনাকে ডিভাইসের ক্যামেরা বা গ্যালারি অ্যাক্সেস করতে এবং ব্যবহারকারীদের ছবি আপলোড করতে সহায়তা করে।

Camera ব্যবহার (React Native Camera)

React Native-এ ক্যামেরা অ্যাক্সেস করার জন্য react-native-camera বা expo-camera প্যাকেজ ব্যবহার করা হয়। ক্যামেরা ব্যবহার করে আপনি ছবি তুলতে, ভিডিও রেকর্ড করতে, বারকোড স্ক্যান করতে এবং আরও অনেক কিছু করতে পারেন।

Installation (react-native-camera)

1. প্রথমে react-native-camera প্যাকেজটি ইনস্টল করুন:

   npm install react-native-camera --save

   অথবা, যদি আপনি Expo ব্যবহার করেন:

   expo install expo-camera

2. তারপর ক্যামেরা অ্যাক্সেসের জন্য অনুমতি সেটআপ করুন (Android এবং iOS এর জন্য)।

ব্যবহার (react-native-camera)

import React, { useState, useEffect } from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';
import { Camera } from 'react-native-camera';

const CameraApp = () => {
  const [camera, setCamera] = useState(null);
  const [photoUri, setPhotoUri] = useState(null);

  const takePhoto = async () => {
    if (camera) {
      const data = await camera.takePictureAsync();
      setPhotoUri(data.uri);
    }
  };

  return (
    <View style={styles.container}>
      {photoUri ? (
        <Image source={{ uri: photoUri }} style={styles.photo} />
      ) : (
        <Camera
          style={styles.camera}
          type={Camera.Constants.Type.back}
          ref={(ref) => setCamera(ref)}
        >
          <Button title="Take Photo" onPress={takePhoto} />
        </Camera>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  camera: {
    width: '100%',
    height: '100%',
  },
  photo: {
    width: 300,
    height: 300,
    marginBottom: 20,
  },
});

export default CameraApp;

ব্যাখ্যা:

• Camera: এটি ক্যামেরা ইন্টারফেস তৈরি করতে ব্যবহৃত হয়।
• takePictureAsync(): এটি ব্যবহারকারীর ছবি নেওয়ার জন্য ব্যবহৃত হয় এবং ছবি তোলার পর uri পাওয়া যায়।

Image Picker ব্যবহার (Image Picker Library)

React Native-এ Image Picker ব্যবহার করতে, আপনি react-native-image-picker বা expo-image-picker ব্যবহার করতে পারেন। এটি ব্যবহারকারীদের ছবি অথবা ভিডিও নির্বাচন করতে সহায়ক, যা পরে অ্যাপের মধ্যে ব্যবহার করা যাবে।

Installation (react-native-image-picker)

1. প্রথমে react-native-image-picker প্যাকেজটি ইনস্টল করুন:

   npm install react-native-image-picker --save

   অথবা, যদি আপনি Expo ব্যবহার করেন:

   expo install expo-image-picker

ব্যবহার (react-native-image-picker)

import React, { useState } from 'react';
import { View, Button, Image, StyleSheet } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

const ImagePickerApp = () => {
  const [image, setImage] = useState(null);

  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
    });

    if (!result.cancelled) {
      setImage(result.uri);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Pick an image from gallery" onPress={pickImage} />
      {image && <Image source={{ uri: image }} style={styles.image} />}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
    marginTop: 20,
  },
});

export default ImagePickerApp;

ব্যাখ্যা:

• launchImageLibraryAsync(): এটি ব্যবহারকারীর গ্যালারি থেকে ছবি নির্বাচন করতে ব্যবহৃত হয়।
• mediaTypes: ImagePicker.MediaTypeOptions.Images: এটি শুধুমাত্র ছবি নির্বাচন করতে অনুমতি দেয়।
• quality: 1: এটি ছবির গুণমান নিয়ন্ত্রণ করতে সহায়ক।

Camera এবং Image Picker এর মধ্যে পার্থক্য

সারাংশ

• Camera এবং Image Picker উভয়ই মোবাইল অ্যাপে ছবি বা ভিডিও ব্যবস্থাপনা করতে সহায়ক।
• Camera ব্যবহারকারীদের ছবি তোলার জন্য ব্যবহৃত হয়, যেখানে Image Picker গ্যালারি থেকে ছবি বা ভিডিও নির্বাচন করতে ব্যবহৃত হয়।
• আপনি expo-image-picker বা react-native-image-picker লাইব্রেরি ব্যবহার করতে পারেন, এবং তাদের API দ্বারা ক্যামেরা এবং গ্যালারি অ্যাক্সেস পরিচালনা করতে পারবেন।

এটি আপনাকে ব্যবহারকারীদের জন্য ছবি বা ভিডিও গ্রহণ করার একটি কার্যকরী এবং ইন্টারেক্টিভ পদ্ধতি প্রদান করে।